<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="../common/NavigationLeft.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>二维码管理系统</title>
    <link type="text/css" href="/js/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <%--<link type="text/css" href="/js/zTree/css/demo.css" rel="stylesheet"/>--%>
</head>
<body style="height: 100%">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <!-- 	  <nav class="navbar  navbar-fixed-static" bo> -->
    <!-- 	  		<h5 style="font-size:20px"><b>资产列表</b></h5> -->
    <!-- 	  </nav> -->
    <s:if test="id == 0">
        <h2 class="page-header">添加用户</h2>
    </s:if>
    <s:if test="id == 1">
        <h2 class="page-header">修改用户</h2>
    </s:if>
    <form id="commitForm" class="form-horizontal" method="post">
        <input id="userId"  type="hidden" name="user.id"  value="${id}"/>
        <div class="form-group">
            <label for="name_input" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-3">
                <input type="text" id="name" name="user.name" class="form-control" id="name_input"
                       placeholder="" value="${user.name}">
            </div>
        </div>
        <div class="form-group">
            <label for="password_input" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-3">
                <input type="text" id="password" name="user.password" value="${user.password}" class="form-control" id="password_input"
                       placeholder="">
            </div>
        </div>
        <div class="form-group">
            <label for="code_input" class="col-sm-2 control-label">用户编号</label>
            <div class="col-sm-3">
                <input type="text" id="code" name="user.code" value="${user.code}" class="form-control" id="code_input"
                       placeholder="">
            </div>
        </div>
        <div class="form-group">
            <label for="branchOfficeId" class="col-sm-2 control-label">所属子公司</label>
            <div class="col-sm-3">
                <select id="branchOfficeId" class="form-control">
                    <c:forEach var="item" items="${branchOfficeList}">
                    <option value="${item.id}" ss="${user.branchOffice}"
                            <c:if test="${item.id == user.branchOffice}">selected="selected"</c:if> >
                        ${item.name}
                    </option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="depart_span" class="col-sm-2 control-label">所属部门</label>
            <%--<div class="col-sm-3">--%>
            <div class="col-sm-3">
                <span id="depart_span">${user.department}</span>
                <span id="depart_require_msg"></span>
                <button type="button" id="chooseDepartButton">选择部门</button>
            </div>
        </div>
        <%--private Integer code;--%>
        <%--private Long depart;--%>
        <%--private Long branchOffice;--%>
        <%--private String area;--%>

        <div class="form-group">
            <label for="role" class="col-sm-2 control-label">角色</label>
            <div class="col-sm-4">
                <select id="role" name="userRoleKey">
                    <option value="Admin" <s:if test="userRoleKey == 'Admin'" >selected="selected"</s:if> >管理员</option>
                    <option value="User" <s:if test="userRoleKey == 'User'" >selected="selected"</s:if>>普通用户</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="status" class="col-sm-2 control-label">状态</label>
            <div class="col-sm-4">
                <select id="status" name="userStatusKey">
                    <%--Using("使用中",(short)0),Assigned("已分配",(short)1),Maintenance("维修中",(short)2),Spare("备用",(short) 3),Scrap("报废",(short)4);--%>
                    <option value="Normal" <s:if test="userStatusKey == 'Normal'" >selected="selected"</s:if>>正常</option>
                    <option value="Disabled" <s:if test="userStatusKey == 'Disabled'" >selected="selected"</s:if>>禁用</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="code_input" class="col-sm-2 control-label">备注</label>
            <div class="col-sm-3">
                <input type="text" id="remark" name="remark" value="${user.remark}" class="form-control"
                       placeholder="备注">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button id="submit_btn" type="submit"  class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
    <div class="layer_panel" id="select_department_panel" >
        <div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
    </div>
</div>
<script type="text/javascript" src="/js/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        callback:{
            onClick:function (event, treeId, treeNode) {
                var nodes = treeNode.getPath();
                var path = "";
                for(var index in nodes){
                    path = path+"/"+nodes[index].name;
                }
                path = path.substr(1);
                $("#depart_span").text(path);
                $("#depart_require_msg").html("");
            }
        },

    };
    $("#chooseDepartButton").click(function(){
        layer.open({
            title: '选择部门',
            type: 1,
            area: ['400px'],
            content: $("#select_department_panel"),
            btn: ['确定', '取消'],
            yes: function(index, layero) {
                layer.close(index);
            },
            cancel: function(index) {}
        });
    });
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
        {name:"test1", open:false, children:[
            {name:"test1_1",children:[{name:"1"}]}, {name:"test1_2"}]},
        {name:"test2", open:false, children:[
            {name:"test2_1"}, {name:"test2_2"}]}
    ];
    $(document).ready(function(){

    });

    $('#commitForm').validator({
        fields:{
            "user.name":"required",
            "user.password":"required",
            "user.code":"required",
        },
        valid: function(form) {
            var me = this;
            // Before submitting the form, hold form, to prevent duplicate submission.
            me.holdSubmit();
            var url = "";
            var id = $("#userId").val();
            if(id =='0' || id == ""){
                url="/asset/ajax_addUser.action";
            }else {
                url="/asset/ajax_modifyUser.action";
            }
            var departName = $("#depart_span").text();
            if(departName =="" || departName == undefined){
                $("#depart_require_msg").html('<b style="color: red">请选择部门</b>');
                me.holdSubmit(false);
                return;
            }
            var data = {
                "id":$("#userId").val(),
                "name":$("#name").val(),
                "password":$("#password").val(),
                "department":$("#depart_span").text(),
                "userRoleKey":$("#role").val(),
                "userStatusKey":$("#status").val(),
                "remark":$("#remark").val(),
                "branchOfficeId":$("#branchOfficeId").val(),
                "code":$("#code").val()
            }

            $.ajax({
                url:url,
                type:"post",
                data:data,
                success:function (result) {
                    if(result == "success"){
                        location.href="/asset/userList";
//                    layer.alert("操作成功");
                    }else{
                        layer.alert("操作失败");
                    }
                },
                error:function () {
                    layer.alert("服务器错误");
                }
            });
        }
    });


    $(function () {
        var departments;
        $("#departDiv-0").find("select").change();
        initSelectDepart();
        function initSelectDepart() {
            $.ajax({
                url:"/asset/ajax_listDepartments.action",
                type:"post",
                data:{departQueryName:'CTO中心'},
                success:function (data) {
//                    departments = data;
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
                }
            })
        }
    })
</script>
</body>
</head>
</html>